/**
 * Created with hong.rong
 * Date:2020/07/03
 */

import React from 'react'
import { isFunction } from 'lodash'
import { Input, Row, Col, Form, Button } from 'antd'
import Modify from './Modify/index'
import CategorySelect from './CategorySelect'

const FormItem = Form.Item

export default function Search({ onSearch, refreshList }) {
  const [form] = Form.useForm()

  const onFinish = values => {
    isFunction(onSearch) && onSearch(values)
  }
  return (
    <div className="overflow-hidden">
      <Form form={form} onFinish={onFinish}>
        <Row gutter={[16, 16]}>
          <Col span={6}>
            <FormItem label="类目">
              <CategorySelect
                onChange={value => {
                  const length = (value || []).length
                  form.setFieldsValue({
                    pid: value[length - 1],
                    cateLevel: length,
                  })
                }}
              />
            </FormItem>
          </Col>
          <FormItem noStyle name="pid">
            <Input type="hidden" />
          </FormItem>
          <FormItem noStyle name="cateLevel" initialValue={1}>
            <Input type="hidden" />
          </FormItem>
          <Col span={6}>
            <FormItem label="类目名称" name="Title">
              <Input placeholder="请选择" />
            </FormItem>
          </Col>
          <Col span={12}>
            <div className="ub ub-row ub-as ub-sb">
              <FormItem>
                <Button type="primary" htmlType="submit">
                  搜索
                </Button>
              </FormItem>
              <Modify refreshList={refreshList}>
                {show => (
                  <Button
                    type="primary"
                    onClick={() => show(Modify.TYPE.CREATE.VALUE)}
                  >
                    新建
                  </Button>
                )}
              </Modify>
            </div>
          </Col>
        </Row>
      </Form>
    </div>
  )
}
